<template>
  <div>
    <el-upload :action="UPLOAD_URL" accept="image/*" :file-list="values" :multiple="true" list-type="picture-card" :on-success="onXdUploadSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <div class="text-center">
        <img :src="dialogImageUrl" alt="" style="max-width:100%;"/>
      </div>
      
    </el-dialog>  
  </div>
</template>

<script>
export default {
  name: "xd-upload",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  computed: {
    values() {
      if (this.imgSrcs) {
        return this.imgSrcs.split(",").map(el => {
          return {
            url: this.imgUrl(el)
          };
        });
      }
      return [];
    }
  },
  model: {
    prop: "imgSrcs",
    event: "change"
  },
  props: {
    imgSrcs: {
      type: String,
      default: ""
    }
  },
  methods: {
    onXdUploadSuccess(e) {
      console.log(e);
      if (e.errcode == 0) {
        this.values.push({
          url: e.info
        });
        this.$emit("change", this.values.map(el => el.url).join(","));
      } else {
        this.$message(e.msg);
      }
    },
    handleRemove(file, fileList) {
      this.values = fileList;
      this.$emit("change", this.values.map(el => el.url).join(","));
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>